<template>
	<view class="hotTemplate" v-if="productList.length">
		<view class="evaluateIcon flex-items">
			<image :src="`${VUE_APP_STATIC_URL}static/images/hot_recomment.png`" widthfix></image>
			<!-- <text>为您推荐</text> -->
		</view>
		<view class="recommendList">
			<view class="itemBox" v-for="(item, index) of productList"
				@click="goodsDateils(item.shopId,item.productId,item.skuId)">
				<view class="itemImg">
					<image :src="item.image" class="pic-img default-img"></image>
				</view>
				<view class="itemTit">{{item.productName}}</view>
				<view class="flex-items shopNameBox">
					<view class="shopName">{{item.shopName}}</view>
					<view class="paymentNum">{{item.users}}人付款</view>
					<div v-if="item.rewardContribute>0" class="reward-price">
						贡献值{{ item.rewardContribute }}
					</div>
				</view>
				<view class="itemPrice">
					<view class="price">￥{{item.price}}</view>
					<view class="originalPrice" v-if="item.originalPrice>item.price">￥{{item.originalPrice}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import API from "@/config/api";
	import {
		request
	} from "@/utils/request";
	import {
		onMounted,
		ref
	} from "vue";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const listQuery = ref({
		page: 1,
		pageSize: 6
	})
	const productList = ref([])

	onMounted(() => {
		GetremenList()
	})

	// 获取列表数据
	function GetremenList() {
		listQuery.value.timestamp = new Date().getTime()
		request(API.GetremenList, listQuery.value, 'get').then(res => {
			uni.stopPullDownRefresh();
			if (res && res.code == 200) {
				productList.value = res.data.list
			} else {
				uni.showToast({
					title: res && res.message || '系统异常',
					icon: 'none'
				})
			}
		})
	}
	//商品详情
	function goodsDateils(shopId, productId, skuId) {
		uni.navigateTo({
			url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + shopId + '&productId=' + productId +
				'&skuId=' +skuId
		})
	}
</script>

<style lang="scss" scoped>
	.hotTemplate {
		padding: 1rpx 0 50rpx 0;
		background: #efefef;

		.evaluateIcon {
			justify-content: center;

			image {
				width: 258rpx;
				height: 42rpx;
				object-fit: contain !important;
				/* 保持宽高比，图像可能不会填满整个容器 */
			}
		}

		.recommendList {
			display: flex;
			flex-wrap: wrap;

			.itemBox {
				width: 47%;
				margin: 16rpx 1% 16rpx 2%;
				background: #FFFFFF;

				.itemImg {
					width: 340rpx;
					height: 340rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
					}
				}

				.itemTit {
					width: 100%;
					font-weight: 600;
					font-size: 28rpx;
					margin-top: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.shopNameBox {
					height: 40rpx;
					margin-top: 8rpx;
					justify-content: space-between;
					display: flex;

					.shopName {
						color: #666666;
						font-size: 24rpx;
						font-weight: 400;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.paymentNum {
						color: #666666;
						font-size: 24rpx;
						font-weight: 400;
						margin-left: 2rpx;
					}
					
					.reward-price {
						float: right;
						padding: 4rpx 12rpx;
						color: #fff;
						background-color: #F3651F;
						border-radius: 28rpx;
						font-size: 18rpx;
						background: #F3651F;
						border-radius: 28rpx;
					}
				}

				.itemPrice {
					display: flex;
					align-items: center;
					margin-top: 8rpx;
					.price {
						font-size: 28rpx;
						font-weight: 600;
						color: #000000;
					}

					.originalPrice {
						color: #CCCCCC;
						margin-left: 4rpx;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>